<template>
  <div class="whole">
    <div class="title">
      {{ information.title
      }}<span class="claim" @click="claim_refer">[认领该文献]</span>
    </div>
    <div class="btn_group">
      <div class="button" @click="read">
        <i class="el-icon-reading"></i>查看原文
      </div>
      <div class="button"><i class="el-icon-folder-add"></i>加入收藏</div>
      <!-- <div class="button"><i class="el-icon-download"></i>下载</div> -->
      <div class="button"><i class="el-icon-link"></i>分享</div>
    </div>
    <div class="li">
      <span style="font-weight: 600" class="abstract">摘要：</span
      ><span class="abstract">{{ information.abstract }}</span>
    </div>
    <div class="li">
      <span class="pre">关键词：</span>
      <span
        class="keywords"
        v-for="(keyword, index) in information.keywords"
        :key="index"
      >
        {{ keyword }}
      </span>
    </div>
    <div class="li">
      <span class="pre">作者：</span>
      <span
        class="author"
        v-for="(author, index) in information.authors"
        :key="index"
        >{{ author }}</span
      >
    </div>
    <div class="li">
      <span class="pre">发布时间：</span><span>{{ information.date }}</span>
    </div>
    <div class="li">
      <span class="pre">单位：</span
      ><span
        class="organisation"
        v-for="(organisation, index) in information.organisations"
        :key="index"
        >{{ organisation }}</span
      >
    </div>
    <div class="li">
      <span class="pre">分类号：</span><span>{{ information.doi }}</span>
    </div>
    <div
      style="border-top: 1px dashed #ccc; height: 20px; margin: 10px 0"
    ></div>
    <div class="footer">
      <el-tabs type="border-card">
        <el-tab-pane label="引文网络"
          ><div
            v-for="(article, index) in information.cite"
            :key="index"
            class="article"
          >
            [{{ index + 1 }}]. {{ article.title }}
          </div></el-tab-pane
        >
        <el-tab-pane label="相关文献"
          ><div
            v-for="(article, index) in information.relative"
            :key="index"
            class="article"
          >
            [{{ index + 1 }}]. {{ article.title }}
          </div></el-tab-pane
        >
      </el-tabs>
    </div>
    <el-dialog
      title="请输入您的信息"
      :visible.sync="dialog"
      width="50%"
      :before-close="dialogClose"
    >
      <div>
        <el-form ref="applyForm" :model="claim" label-width="80px">
          <el-form-item label="您的姓名">
            <el-input v-model="claim.real_name"></el-input>
          </el-form-item>
          <el-form-item label="您的身份">
            <el-radio-group v-model="claim.user_identity">
              <el-radio label="高校学生"></el-radio>
              <el-radio label="高校教师"></el-radio>
              <el-radio label="研究所科研人员"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="您的单位">
            <el-input v-model="claim.user_unit"></el-input>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input
              type="textarea"
              v-model="claim.user_introduction"
              placeholder="请输入内容"
              :autosize="{ minRows: 5, maxRows: 10 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="info" @click="dialog = false">取 消</el-button>
        <el-button type="success" @click="submit_claim">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "", //论文id
      information: "",
      dialog: false,
      claim: {
        real_name: "",
        user_identity: "",
        user_unit: "",
        user_introduction: "",
      },
    };
  },
  methods: {
    read() {
      const { href } = this.$router.resolve("/Passage/" + this.id);
      window.open(href, "_blank");
    },
    claim_refer() {
      this.dialog = true;
    },
    submit_claim() {
      this.dialog = false;
      alert("1");
    },
  },
  mounted() {
    var id = this.$route.params.id;
    this.id = id;
    this.information = {
      id: 12348787,
      doi: "10.7498/aps.70.20210603",
      title: "文献是十三订饭三分",
      authors: ["作者1", "作者2", "作者3", "作者4"],
      abstract:
        "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
      date: "2021-11-20",
      keywords: [
        "关键词1",
        "关键词2",
        "关键词3",
        "关键词4",
        "关键词5",
        "关键词6",
      ],
      cited: 54,
      download: 100,
      organisations: ["北京大学", "清华大学"],
      cite: [
        { title: "这是引用的文献标题", id: 1565112 },
        { title: "这是引用的文献标题2", id: 11212112 },
        { title: "这是引用的文献标题3", id: 15651212 },
      ],
      relative: [
        { title: "这是相关的文献标题", id: 115155112 },
        { title: "这是相关的文献标题2", id: 145212112 },
        { title: "这是相关的文献标题3", id: 15655212 },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.whole {
  width: 65%;
  height: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  // background-color: aquamarine;
  font-family: "Microsoft YaHei";
  min-width: 700px;
  font-size: 17px;
  color: #666666;
  padding: 5px 40px;
  box-shadow: 0 0 6px rgba(207, 216, 221, 0.63),
    0 4px 6px rgba(207, 216, 221, 0.63);
}
.title {
  font-size: 27px;
  font-weight: 550;
  padding: 20px 0;
  color: #417dc9;
}
.btn_group {
  padding: 13px 0;
}
.button {
  font-size: 16px;
  color: #417dc9;
  display: inline-block;
  padding: 6px 12px;
  margin-right: 15px;
  border-radius: 5px;
  border: 1px solid #417dc9;
  user-select: none;
}
.button:hover {
  background-color: #417dc9;
  color: white;
  cursor: pointer;
}
/deep/.el-icon-reading {
  padding-right: 4px;
}
/deep/.el-icon-folder-add {
  padding-right: 4px;
}
/deep/.el-icon-link {
  padding-right: 4px;
}
/deep/.el-icon-download {
  padding-right: 4px;
}
.abstract {
  line-height: 35px;
}
.author {
  color: #417dc9;
  display: inline-block;
  padding: 0px 7px;
  user-select: none;
}
.author:hover {
  color: #ff6c00;
  cursor: pointer;
}
.organisation {
  padding: 0 7px;
}
.keywords:hover {
  cursor: pointer;
  color: #ff6c00;
}
.keywords {
  color: #417dc9;
  display: inline-block;
  padding: 0 5px;
}
.article {
  font-size: 14px;
  color: #417dc9;
  user-select: none;
  padding: 7px 0;
}
.article:hover {
  color: #ff6c00;
  cursor: pointer;
}
.li {
  padding: 12px 0;
}
.pre {
  font-weight: 600;
  display: inline-block;
  width: 120px;
}
.claim {
  font-weight: normal;
  font-size: 10px;
  padding: 0 5px;
  user-select: none;
  cursor: pointer;
}
.claim:hover {
  color: #0f5de5;
}
</style>